<template>
	<view name='chartsPopup'>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">走势图：{{type == 1 ? '起始中茶价格 0.4 / g (2021-08)' : '公司成长值：1000万（2021年）'}} </view>
				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
					 disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
					 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
					<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
					<!--#endif-->
				</view>
				<button class="popup-close" @click="close()"> 关闭 </button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../uni-popup/uni-popup.vue';
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import uCharts from '../../components/u-charts/u-charts.js';
	var canvaLineA = null;
	export default {
		name: 'chartsPopup',
		components: {
			uniPopup
		},
		props: {
			data: '',
			type: {
				type: [String,Number],
				default: function() {
					return 1
				}
			},
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			}
		},
		
		mounted() {
			
		},
		methods: {
			initData:function () {
				var self = this;
				serve.request({
					url: '/tea/index/month-list',
					data: {
						appkey: uni.getStorageSync('appkey')
					}
				}).then(res => {
					let categories = [];
					let dataList = [];
					let dataAll = res.data;
					// console.info(dataAll);
					let maxPrice = 0;
					dataAll.forEach((item, key) => {
						categories.push(item.day);
						dataList.push(item.price);
						if(Number(item.price) > Number(maxPrice)) {
							maxPrice = item.price;
						}
					});
					// maxPrice = Number(maxPrice) + Number(1);
					let LineA = {
						categories: categories,
						series: [{
							"name": self.type == 1 ? "价格" : "总值",
							"data": dataList
						}]
					};
					console.info(LineA);
					self.showLineA("canvasLineA", LineA, maxPrice);
				});
				// let LineA = {
				// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
				// 	series: [{
				// 		"name": "产量",
				// 		"data": [70, 40, 65, 100, 44, 68]
				// 	}]
				// };
				// LineA.categories = ["2016", "2017", "2018", "2019", "2020", "2021"];
				// LineA.series[0].data = _self.outputArr;
				// this.showLineA("canvasLineA", LineA);
			},
			initData2:function () {
				var self = this;
				serve.request({
					url: '/tea/growup/month-list',
					data: {
						appkey: uni.getStorageSync('appkey')
					}
				}).then(res => {
					let categories = [];
					let dataList = [];
					let dataAll = res.data;
					// console.info(dataAll);
					let maxPrice = 0;
					dataAll.forEach((item, key) => {
						categories.push(item.day);
						dataList.push(item.price);
						if(Number(item.price) > Number(maxPrice)) {
							maxPrice = item.price;
						}
					});
					// maxPrice = Number(maxPrice) + Number(1);
					let LineA = {
						categories: categories,
						series: [{
							"name": "价格",
							"data": dataList
						}]
					};
					console.info(LineA);
					self.showLineA("canvasLineA", LineA, maxPrice);
				});
				// let LineA = {
				// 	categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
				// 	series: [{
				// 		"name": "产量",
				// 		"data": [70, 40, 65, 100, 44, 68]
				// 	}]
				// };
				// LineA.categories = ["2016", "2017", "2018", "2019", "2020", "2021"];
				// LineA.series[0].data = _self.outputArr;
				// this.showLineA("canvasLineA", LineA);
			},
			showLineA:function(canvasId, chartData, maxPrice) {
				var _self = this;
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						disableGrid: true,
						gridType: 'dash',
						splitNumber: Math.ceil(maxPrice / 5),
						min: 0,
						max: Math.ceil(maxPrice),
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
					context: uni.createCanvasContext(canvasId, _self),
				});
			},
			touchLineA(e) {
				console.info(1);
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				console.info(2);
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				console.info(3);
				canvaLineA.scrollEnd(e);
			},
			open(){
				this.cWidth = uni.upx2px(700);
				this.cHeight = uni.upx2px(500);
				if(this.type == 1){
					this.initData();
				}else if(this.type == 2){
					this.initData2()
				}
				
				this.$refs.popup.open();
			},
			
			
			close() {
				this.$refs.popup.close()
			},
			
		},
		watch: {
			year() {
				this.amend();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content{
		background: white;
		    border-radius: 8rpx;
	}
	.popup-title{
		text-align: center;
		    font-size: 34rpx;
		    color: #333;
		    line-height: 100rpx;
	}
	.qiun-charts {
	    width: 700upx;
	    height: 500upx;
	    background-color: #FFFFFF;
		padding-top: 30upx;
	}	
	.charts {
	    width: 700upx;
	    height: 500upx;
	    background-color: #FFFFFF;
	}
	.popup-close{
		    background-color: #ffffff !important;
		    color: #333;
	}
	
</style>
